<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>SameReport - 论文检测报告</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../htmls/css/detail-right.css">
    <link rel="stylesheet" href="../layui/css/myicon/iconfont.css">
    <style type="text/css">
        em {
            font-style: normal;
            color: #FF6600
        }

        .red {
            color: #FF0000
        }

        .green {
            color: #008000
        }

    </style>
    <style>
        /* 自定义标题样式 */
        .layui-layer-title {
            font-weight: bold; /* 加粗字体 */
        }
    </style>
</head>
<body>
<div class="back">
    <i class="layui-icon layui-icon-close" style="font-size: 25px; font-weight: bold;color: darkgray"
       onclick="window.history.back()"></i>
</div>
<div class="container">
    <div class="container head">
        <div class="container head rate-suggest">
            <div class="container head rate-suggest rate">
                <span>相似度:</span>
                <span id="sentence-rate" style="color: #f12828;padding-left: 10px"></span>
            </div>
            <div class="container head rate-suggest button">
                <a href="#suggest">
                    <button type="button" class="layui-btn layui-btn-radius layui-btn-sm">修改建议</button>
                </a>
            </div>

        </div>

        <div class="container head sentence">
            <span style="min-width: 50px;margin-right:0">原句:</span>
            <span id="sentence-origin" style="color: #f12828;font-size: 13px;margin-left:0;padding-left: 10px"></span>
        </div>


    </div>
    <div class="container layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this" id="comprehensive-tab">综合</li>
            <li id="local-tab">本地资源</li>
            <li id="internet-tab">互联网资源</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show" id="comprehensive-content"></div>
            <div class="layui-tab-item" id="local-content"></div>
            <div class="layui-tab-item" id="internet-content"></div>
        </div>
    </div>
    <div class="suggest" id="suggest">

    </div>
</div>
<div class="zhengwencenter">
    <p>
        检测报告由SameReport文献相似度检测系统生成
    </p>
    <p>
        Copyright © 2007-2024 SameReport
    </p>
</div>
<div style="height:500px;background-color: #FFFFFF;color: #FFFFFF"></div>
<script src="../layui/layui.js"></script>
<script src="js/data.js"></script>
<script type="application/javascript" src="js/mustache.min.js"></script>
<script type='text/template' id="locallib-template">
    <div class="comprehensive">
        <div class="comprehensive head">
            <span class="index layui-badge" style="margin-left: 10px">{{index}}</span>
            <div class="comprehensive head rate">
                <span>相似度:</span>
                <span style="color: #f12828">{{rate}}%</span>
            </div>
        </div>
        <div class="comprehensive body">
            <fieldset class="layui-elem-field">
                <legend><span style="font-weight: bold;font-size: 14px;color: #343544">原句</span>
                </legend>
                <div class="layui-field-box">
                    <span style="color: #f12828;font-weight: normal">{{origin_sentence}}</span>
                </div>
            </fieldset>
            <fieldset class="layui-elem-field">
                <legend><span style="font-weight: bold;font-size: 14px;color: #343544">相似内容片段</span>
                </legend>
                <div class="layui-field-box" style="font-weight: normal">
                    {{{similar_content}}}
                </div>
            </fieldset>
            <div class="comprehensive body info">
                <span>标题:</span>
                <span class="comprehensive body info value">《{{title}}》</span>
            </div>
            <div class="comprehensive body info">
                <span>作者:</span>
                <span class="comprehensive body info value">{{author}}</span>
            </div>
            <div class="comprehensive body info">
                <span>来源:</span>
                <span class="comprehensive body info value">{{source}}</span>
            </div>
            <div class="comprehensive-border">
                <hr class="layui-border-green">
            </div>
        </div>
    </div>
</script>
<script type='text/template' id="internetlib-template">
    <div class="comprehensive">
        <div class="comprehensive head">
            <span class="index layui-badge" style="margin-left: 10px">{{index}}</span>
            <div class="comprehensive head rate">
                <span>相似度:</span>
                <span style="color: #f12828">{{rate}}%</span>
            </div>
        </div>
        <div class="comprehensive body">
            <fieldset class="layui-elem-field">
                <legend><span style="font-weight: bold;font-size: 14px;color: #343544">原句</span>
                </legend>
                <div class="layui-field-box">
                    <span style="color: #f12828">{{origin_sentence}}</span>
                </div>
            </fieldset>
            <fieldset class="layui-elem-field">
                <legend><span style="font-weight: bold;font-size: 14px;color: #343544">相似内容片段</span>
                </legend>
                <div class="layui-field-box" style="font-weight: normal">
                    {{{similar_content}}}
                </div>
            </fieldset>
            <div class="comprehensive body info">
                <span>标题:</span>
                <span class="comprehensive body info value">《{{title}}》</span>
            </div>
            <div class="comprehensive body info">
                <span>来源:</span>
                <span class="comprehensive body info value">互联网</span>
            </div>
            <div class="comprehensive-border">
                <hr class="layui-border-green">
            </div>
        </div>
    </div>
</script>
<script type='text/template' id="tab-badge">
    <span class="layui-badge layui-bg-green">{{index}}</span>
</script>
<script type='text/template' id='suggest-template'>
    <fieldset class="layui-elem-field">
        <legend><span style="font-weight: bold;font-size: 18px;color: #009688">修改建议</span>
        </legend>
        <div class="layui-field-box" style="font-weight: normal">
            <div style="padding-bottom: 20px">
                <span style="color: #343544;font-weight: bold;width: 20%;margin-right: 2px">原句：</span>
                <span style="color: #f12828;font-weight: bold;width: 80%">{{origin_sentence}}</span>
            </div>
            <div class="container head ai">
                <button type="button" class="layui-btn layui-btn-primary layui-btn-radius" id="AIRewrite">
                    <i class="layui-icon layui-icon-android" id="AIRewriteIcon"></i>
                    智能改写
                </button>
            </div>
            <div style="padding-bottom: 20px;display: none" id="ai-div">
                <span style="color: #343544;font-weight: bold;width: 20%;margin-right: 2px">智能改写：</span>
                <span style="color: #5650EB;font-weight: bold;width: 80%" id="sentence-ai"></span>
            </div>
<!--            <div class="container head sentence" id="ai-div" style="display: none">-->
<!--                <span style="min-width: 50px;margin-right:0">智能改写:</span>-->
<!--                <span id="sentence-ai" style="color: #5650EB;font-size: 13px;margin-left:0;padding-left: 10px"></span>-->
<!--            </div>-->

            <hr class="layui-border-orange">
            <div class="suggest content">
                {{#suggest}}
                <div style="padding-bottom: 10px">
                    <span style="color: #343544;font-weight: bold;width: 20%;margin-right: 2px">{{word}}：</span>
                    <span style="color: green;font-weight: bold;width: 80%">{{suggest}}</span>
                </div>
                {{/suggest}}
            </div>
        </div>
    </fieldset>
</script>
<script src="js/jquery.min.js"></script>
<script>
    //一般直接写在一个js文件中
    layui.use('element', function () {
        var element = layui.element;
        element.on('nav(header-nav)', function (data) {
            console.log(data)
        });
    })
</script>
<script>
    function getParameter(sProp) {
        var re = new RegExp(sProp + "=([^\&]*)", "i");
        var a = re.exec(document.location.search);
        if (a == null)
            return null;
        return a[1];
    }

    function createComprehensiveInfo(data) {
        var count = 0
        data.forEach((currentValue, index, arr) => {
            count += 1
            var currData = currentValue
            currData.index = index + 1
            var template = ''
            var view = ''
            var dom = document.createElement('div')
            if (currentValue.source === '互联网') {
                template = document.getElementById("internetlib-template").innerHTML;
                view = Mustache.render(template, currData);
                dom.innerHTML = view
            } else {
                template = document.getElementById("locallib-template").innerHTML;
                view = Mustache.render(template, currData);
                dom.innerHTML = view
            }
            document.getElementById('comprehensive-content').appendChild(dom);
        })
        var badge_dom = document.createElement('span')
        badge_dom.innerHTML = Mustache.render(document.getElementById("tab-badge").innerHTML, {'index': count})
        document.getElementById('comprehensive-tab').appendChild(badge_dom);
    }

    function createLocalInfo(data) {
        var number = 0
        data.forEach((currentValue, index, arr) => {
            var currData = currentValue
            if (currData.source.indexOf('互联网') === -1) {
                number += 1
                currData.index = number
                var template = ''
                var view = ''
                var dom = document.createElement('div')
                if (currentValue.source === '互联网') {
                    template = document.getElementById("internetlib-template").innerHTML;
                    view = Mustache.render(template, currData);
                    dom.innerHTML = view
                } else {
                    template = document.getElementById("locallib-template").innerHTML;
                    view = Mustache.render(template, currData);
                    dom.innerHTML = view
                }
                document.getElementById('local-content').appendChild(dom);
            }
        })
        var badge_dom = document.createElement('span')
        badge_dom.innerHTML = Mustache.render(document.getElementById("tab-badge").innerHTML, {'index': number})
        document.getElementById('local-tab').appendChild(badge_dom);
    }

    function createInternetInfo(data) {
        var number = 0
        if (data.length > 0) {
            data.forEach((currentValue, index, arr) => {
                var currData = currentValue
                if (currData.source.indexOf('互联网') !== -1) {
                    number += 1
                    currData.index = number
                    var template = ''
                    var view = ''
                    var dom = document.createElement('div')
                    if (currentValue.source === '互联网') {
                        template = document.getElementById("internetlib-template").innerHTML;
                        view = Mustache.render(template, currData);
                        dom.innerHTML = view
                    } else {
                        template = document.getElementById("locallib-template").innerHTML;
                        view = Mustache.render(template, currData);
                        dom.innerHTML = view
                    }
                    document.getElementById('internet-content').appendChild(dom);
                }
            })
        } else {
            var dom = document.createElement('div')
            dom.innerHTML = "<i class=\"layui-icon layui-icon-face-smile\" style=\"font-size: 30px; color: #1E9FFF;\"></i>  ";
            document.getElementById('internet-content').appendChild(dom);
        }

        var badge_dom = document.createElement('span')
        badge_dom.innerHTML = Mustache.render(document.getElementById("tab-badge").innerHTML, {'index': number})
        document.getElementById('internet-tab').appendChild(badge_dom);
    }

    function createSuggest(origin_sentence, suggest) {
        let data = {
            'origin_sentence': origin_sentence,
            'suggest': suggest
        }
        var dom = document.createElement('div')
        template = document.getElementById("suggest-template").innerHTML;
        view = Mustache.render(template, data);
        dom.innerHTML = view
        document.getElementById('suggest').appendChild(dom);
    }

    let sentence_index = getParameter('index')
    createLocalInfo(similar_data[sentence_index]['data'])
    createComprehensiveInfo(similar_data[sentence_index]['data'])
    createInternetInfo(similar_data[sentence_index]['data'])
    createSuggest(similar_data[sentence_index]['data'][0].origin_sentence, similar_data[sentence_index]['suggest'])
    let rateText = similar_data[sentence_index]['data'][0].rate >= 70 ? similar_data[sentence_index]['data'][0].rate + '%' : similar_data[sentence_index]['data'][0].rate + '%' + '(轻度相似，请酌情修改)'
    document.getElementById('sentence-rate').insertAdjacentText('afterBegin', rateText);
    document.getElementById('sentence-origin').insertAdjacentText('afterBegin', similar_data[sentence_index]['data'][0].origin_sentence);
</script>
<script>
    const $ = layui.$;
    $('#AIRewrite').on('click', function () {
        const current_ai_sentence = $('#sentence-ai').text()
        console.log('current_ai_sentence',current_ai_sentence)
        btnIcon = $("#AIRewriteIcon");
        btn = $("#AIRewrite");
        btnIcon.attr("class", "layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop")
        btn.attr('class', 'layui-btn layui-btn-primary layui-btn-radius layui-btn-disabled');
        // 在这里编写按钮点击事件的处理逻辑
        let sentence_index = getParameter('index')
        const origin_sentence = similar_data[sentence_index]['data'][0].origin_sentence
        // let url = 'https://www.samereport.com/test_api/article/ai_rewrite'
        let url = 'https://www.samereport.com.cn/api/article/ai_rewrite'
        let data = {
            sentence_index: sentence_index,
            order_number: order_number,
            sentence: origin_sentence,
            current_ai_sentence: current_ai_sentence
        }
        $.ajax({
            url: url,
            data: JSON.stringify(data),
            method: "post",
            dataType: 'json',
            contentType: 'application/json;charset=utf-8',
            success: function (res) {
                if(res.error_code === 0){
                    const ai_sentence = res.data.anwser
                    document.getElementById('sentence-ai').innerText = ''
                    document.getElementById('sentence-ai').insertAdjacentText('afterBegin', ai_sentence);
                    $('#ai-div').attr('style', "display: block")
                    btnIcon.attr("class", "layui-icon layui-icon-android")
                    btn.attr('class', 'layui-btn layui-btn-primary layui-btn-radius');
                }else if(res.error_code === 1){
                    var imgSrc = 'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket='+res.data.ticket;
                    $('#ai-div').attr('style', "display: block")
                    btnIcon.attr("class", "layui-icon layui-icon-android")
                    btn.attr('class', 'layui-btn layui-btn-primary layui-btn-radius');
                    // 弹出层
                    layer.open({
                        type: 1,
                        title: '扫码关注公众号解锁智能改写',
                        content: '<div style="display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center; padding: 10px;"><img src="' + imgSrc + '" alt="Image" style="max-width: 80%; height: auto;"><p style="font-weight: bold;font-size: 18px;">改写额度已用完</p><p style="font-weight: bold;font-size: 22px;color: #009688">扫码关注公众号解锁智能改写</p></span></div>',
                        area: ['auto', '50%'], // 宽度自适应，高度设置为 80%
                        maxWidth: 100, // 设置弹出层的最大宽度
                        scrollbar: true // 允许滚动条
                    });
                }else if(res.error_code === 2){
                    $('#ai-div').attr('style', "display: block")
                    btnIcon.attr("class", "layui-icon layui-icon-android")
                    btn.attr('class', 'layui-btn layui-btn-primary layui-btn-radius');
                    // 弹出层
                    url = 'https://www.samereport.com.cn/api/article/getmpqrcode?order_number='+order_number
                    layer.open({
                        type: 1,
                        title: '扫码分享小程序给朋友，解锁该报告智能改写',
                        content: '<div style="display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center; padding: 10px;"><img src="' + url + '" alt="Image" style="max-width: 80%; height: auto;"><p style="font-weight: bold;font-size: 18px;">改写额度已用完</p><p style="font-weight: bold;font-size: 22px;color: #009688">分享小程序给朋友，解锁该报告智能改写</p></span></div>',
                        area: ['auto', '50%'], // 宽度自适应，高度设置为 80%
                        maxWidth: 100, // 设置弹出层的最大宽度
                        scrollbar: true // 允许滚动条
                    });
                }
                else{
                    $('#ai-div').attr('style', "display: block")
                    btnIcon.attr("class", "layui-icon layui-icon-android")
                    btn.attr('class', 'layui-btn layui-btn-primary layui-btn-radius');
                    alert(res.message)
                }
            },
            error:function (e) {
                $('#ai-div').attr('style', "display: block")
                btnIcon.attr("class", "layui-icon layui-icon-android")
                btn.attr('class', 'layui-btn layui-btn-primary layui-btn-radius');
                alert('出错了，请重试')
            },
            failure: function (res) {
                $('#ai-div').attr('style', "display: block")
                btnIcon.attr("class", "layui-icon layui-icon-android")
                btn.attr('class', 'layui-btn layui-btn-primary layui-btn-radius');
                alert('出错了，请重试')
                console.log(res)
            },
        })
    })

</script>
</body>
</html>